<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Odyssey.js Scroll</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/x-icon" href="favicon.png" />
  <link rel="icon" type="image/png" href="favicon.png" />

  <link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css" />
  <link rel="stylesheet" href="css/scroll.css" />
  <script src="../vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <div id="layout">
    <!--<div class="progress-bar"></div>-->

    <div class="inner-header">
      <div id="header"></div>
    </div>

    <div id="map_pos">
      <div id="map_container">
        <div id="map"></div>
      </div>
    </div>

    <div id="content"></div>

    <div id="credits">
      <span class="title" id="title">Title</span>
      <span class="author"><b id="author">By Name using</b> <a href="#">Odyssey.js</a><span>
    </div>
  </div> <!-- layout -->

  <script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
  <script src="../dist/odyssey.js" charset="UTF-8"></script>

  <script>
    O.Template({
      init: function() {
        var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
        var map = this.map = L.map('map',{
          center: [0, 0],
          zoom: 4
        });

        this.map.scrollWheelZoom.disable();

        var basemap = this.basemap = L.tileLayer(baseurl, {
          attribution: 'data OSM - map CartoDB'
        }).addTo(map);

        var story = O.Story()

        this.story = story;
        this.miniprogressbar = O.MiniProgressBar();

        // trigger when  map_pos go out of the screen
        this.edge = O.Edge(
          O.Triggers.Scroll().less('map_pos').offset(0),
          O.Triggers.Scroll().greater('map_pos').offset(0)
        )
      },

      update: function(actions) {
        var self = this;

        this.story.clear();

        if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
          this.baseurl = actions.global.baseurl || 'http://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';

          this.basemap.setUrl(this.baseurl);
        }

        if (this.cartoDBLayer && ("http://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
          this.map.removeLayer(this.cartoDBLayer);

          this.cartoDBLayer = null;
          this.created = false;
        }

        if (actions.global.vizjson && !this.cartoDBLayer) {
          if (!this.created) { // sendCode debounce < vis loader
            cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
              self.map.fitBounds(vizjson.bounds);

              cartodb.createLayer(self.map, vizjson)
                .done(function(layer) {
                  self.cartoDBLayer = layer;

                  var sublayer = layer.getSubLayer(0),
                      layer_name = layer.layers[0].options.layer_name,
                      filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";

                  sublayer.setSQL("SELECT * FROM "+layer_name+filter)

                  self.map.addLayer(layer);

                  self._resetActions(actions);
                }).on('error', function(err) {
                  console.log("some error occurred: " + err);
                });
            });

            this.created = true;
          }

          return;
        }

        this._resetActions(actions);
      },

      _resetActions: function(actions) {
        // update footer title and author
        var title_ = actions.global.title === undefined ? '' : actions.global.title,
            author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';

        document.getElementById('title').innerHTML = title_;
        document.getElementById('author').innerHTML = author_;
        document.title = title_ + " | " + author_ +' Odyssey.js';

        var TRIGGER_LINE = this.map.getSize().y + 50;
        this.story.addEvent(
          this.edge,
          O.Parallel(
            O.Actions.CSS($('#map_container')).toggleClass('attachTop'),
            O.Actions.CSS($('#content')).toggleClass('attachMap'),
            O.Actions.Debug().log('attach')
          )
        )

        // create content
        var content = '';

        var slide_ = actions[0];
        $('#header').html(slide_.html());

        this.story
          .addState(
            O.Scroll().within($('#header')),
            slide_(this)
          );

        for(var i = 1; i < actions.length; ++i) {
          var slide = actions[i];
          content += "<div id='s_" + i +"'>" + slide.html() + "</div>";
        }

        $('#content').html(content);

        // first slide is the header, skip it
        for(var i = 1; i < actions.length; ++i) {
          var slide = actions[i];
          this.story.addState(
            O.Triggers.Scroll().within('s_' + i).offset(TRIGGER_LINE),
            O.Parallel(
              slide(this),
              this.miniprogressbar.percent(100*i/(actions.length - 1))
            )
          )
        }

        if(window.scrollY === 0) {
          this.story.go(0);
        }
      }
    });
  </script>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-20934186-21', 'cartodb.github.io');
    ga('send', 'pageview');
  </script>
</body>
</html>
